/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<join-progress :stepInfo="step"></join-progress>
		<view class="notice" v-if="notice">
			<view class="content">
				<image @tap="closeCont" class="close" :src="imgUrl+'user/close_note.png'" role="img"></image>
				<view class="title">入驻须知：</view>
				<view>1.认真填好个人信息。</view>
				<view>2.以下信息都为必填信息。</view>
				<view>3.姓名、号码具有真实性。</view>
			</view>
		</view>
		<form @submit="submitInfo" class="formbox">
			<view class="item">
				<view class="item-name">店主姓名:</view>
				<input class="item-input" name="contacts_name"  v-model="params.contacts_name" placeholder="请填写姓名" placeholder-style="color:#999"></input>
			</view>
			<view class="item">
				<view class="item-name">手机号:</view>
				<input class="item-input" name="contacts_mobile"  v-model="params.contacts_mobile" placeholder="请填写手机号" placeholder-style="color:#999">
				
				</input>
			</view>
			<view @tap="openRegionsModal" class="item" data-id="0">
				<view class="item-name">所在地区:</view>
				<view class="item-input" v-if="province_name.name">{{province_name.name}} {{city_name.name}} {{district_name.name}}</view>
				<view class="item-input" v-else>请选择您的地址</view>
				<view class="item-img">
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</view>
			</view>
			<view class="item">
				<view class="item-name">详细地址:</view>
				<input class="item-input" maxlength="40"  v-model="params.company_address" name="company_address" placeholder="长度请限制在6-40字" placeholder-style="color:#999">
				
				</input>
			</view>
			<view class="item last">
				<view class="item-name foot">
					<view @tap="setAgree" class="choosebox">
						<block v-if="params.agreetrue">
							<image :src="imgUrl+'common/ischeck.png'" role="img"></image>
						</block>
						<block v-if="!params.agreetrue">
							<image :src="imgUrl+'cart/nocheck.png'" role="img"></image>
						</block>
					</view>
					我已阅读《
					<navigator class="guide" role="navigation">入驻协议</navigator>
					》同意签署在线协议！
				</view>
			</view>
			<button class="next-btn" form-type="submit" role="button" aria-disabled="false">
				下一步

			</button>
		</form>
		<address-list :hide="ishide" ref="child" @closeRegionsModal="close"></address-list>
	</view>

</template>

<script>
	import joinProgress from "@/components/joinProgress/joinProgress.vue"
	import AddressList from "@/components/addresslist/addresslist.vue";
	import common from "@/common/common.js";
	import {getStoreApply,postStoreApply,getAddress} from "@/api/api.js";
	import {mapState} from 'vuex';
import config from '@/api/config';
	export default {
		data() {
			return {
				step:1,//步骤
				loginInfo:"",
				imgUrl:config.imgUrl,
				notice:true,//提示控制器
				ishide:false,//区域控件隐藏
				params:{
					contacts_name:"",//联系人姓名
					contacts_mobile:"",//联系人手机号
					company_address:"",//公司详细地址
					company_district:null,//公司所在地区
					company_province:null,//公司所在省份
					company_city:null,//公司所在城市
					agreetrue:false,
				},
				province_name:{//省
					name:"",
					id:0,
				},
				city_name:{//市
					name:"",
					id:0
				},
				district_name:{//区
					name:"",
					id:0
				},
				
			};
		},
		components:{
			joinProgress,
			AddressList
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			if(this.hasLogin){
				this.getStoreApply()
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods:{
			/*获取入驻信息*/ 
			getStoreApply(){
				getStoreApply().then(res=>{
					console.log(res)
					if(res.contacts_name){
						uni.navigateTo({
							url:"/pages/newjoin/join2/join2"
						})
						
					}
					/*店铺名*/ 
					if(res.store_name){
						uni.navigateTo({
							url:"/pages/newjoin/join3/join3"
						})
					}
					/*营业执照*/ 
					if(res.business_licence_number){
						uni.navigateTo({
							url:"/pages/newjoin/join4/join4"
						})
					}
					
				})
			},
			/*提交店铺相关信息*/ 
			postStoreApply(params){
				postStoreApply(params).then(res=>{
					console.log(res)
					if(res.status==1){
						common.total("none","提交成功",3000)
						setTimeout(function(){
							uni.navigateTo({
								url:"/pages/newjoin/join2/join2"
							})
						},3000)
					}
				})
			},
			submitInfo(){
				if(!this.params.contacts_name){
					common.toast("none","请填写联系人姓名",3000)
					return;
				}
				if(!this.params.contacts_mobile){
					common.toast("none","请填写联系人手机号",3000)
					return;
				}
				if(!this.params.company_address){
					common.toast("none","请填写详细地址",3000)
					return;
				}
				if(this.params.company_province==null){
					common.toast("none","请选择省份",3000)
					return;
				}
				if(this.params.company_district==null){
					common.toast("none","请选择地区",3000)
					return;
				}
				if(this.params.company_city==null){
					common.toast("none","请选择城市",3000)
					return;
				}
				if(this.params.agreetrue==false){
					common.toast("none","请勾选入驻协议",3000)
					return;
				}
				console.log(this.params)
				this.postStoreApply(this.params)
			},
			
			
			
			/*选择地址*/
			 openRegionsModal(){
			 	this.ishide=true;
			 	this.$refs.child._getAddress(0)
			 },
			 /*监听子组件 关闭地址弹窗*/
			 close(e){
			 	console.log(e)
			 	
			 	
			 	this.ishide=e.ishide;
			 	this.province_name=e.addressInfo.province_name;
			 	this.city_name=e.addressInfo.city_name;
			 	this.district_name=e.addressInfo.district_name;
				
				this.params.company_city=this.city_name.id;
				this.params.company_province=this.province_name.id;
				this.params.company_district=this.district_name.id
			 	// this.address.twon_name=e.addressInfo.twon_name;
			 },
			/*切换确认入驻协议*/ 
			setAgree(){
				this.params.agreetrue=!this.params.agreetrue
				
			},
			/*关闭提示*/ 
			closeCont(){
				this.notice=false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.notice {
		padding: 20rpx 20rpx 0 20rpx;
		background-color: #f5f5f5;
	}

	.notice .content {
		background-color: #FDFBE4;
		color: #DF9D35;
		font-size: 22rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		line-height: 32rpx;
		position: relative;
	}

	.notice .content .close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.notice .content .title {
		font-size: 28rpx;
	}

	.next_icon {
		width: 32rpx;
		height: 32rpx;
		float: right;
		margin-top: 32rpx;
	}

	.item {
		float: left;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f3f3f3;
		line-height: 100rpx;
		height: 100rpx;
		position: relative;
		background-color: white;
		color: #999;
	}

	.item-name {
		float: left;
	}

	.foot {
		color: #999;
		font-size: 24rpx;
	}

	.item-input {
		float: left;
		height: 100rpx;
		width: 450rpx;
		margin-left: 20rpx;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.arrow {
		position: absolute;
		right: 30rpx;
		width: 32rpx;
		height: 32rpx;
		padding-top: 30rpx;
	}

	switch .wx-checkbox-input {
		border-radius: 50%;
		height: 38rpx;
		width: 38rpx;
	}

	.next-btn {
		float: left;
		background-color: #ff3b3b;
		color: white;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		width: 710rpx;
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.guide {
		color: #ff3b3b;
		display: inline-block;
	}

	.formbox {
		width: 710rpx;
		margin: 0 auto;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.last {
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.choosebox {
		position: relative;
		top: 10rpx;
		left:-8rpx;
	}
</style>
